<template>
  <view class="">
    <view class="header-nav">
      <image
        src="/static/images/index-exchange-project.png"
        class="eccchange-project-img"
        @click="showPopHandler"
      ></image>
      <text class="project-name">{{ currentProject.name }}</text>
    </view>
    <wyb-popup ref="popup" height="100" zIndex="99999" mode="size-auto" type="top">
      <view class="project-pop-box">
        <view
          class=""
          v-for="project in projectList"
          :key="project.id"
          :class="[
            'project-item',
            projectName === project.name ? 'project-item-active' : '',
          ]"
          @click="selectProject(project)"
        >
          <view class="project-item-in">
            {{ project.name }}
          </view>
        </view>
      </view>
    </wyb-popup>
  </view>
</template>

<script>
// import uniPopup from '@/components/uni-popup/uni-popup.vue'
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import { mapGetters } from 'vuex'
import { mapState } from "vuex";
export default {
  components: {wybPopup},
  props: {},
  data() {
    return {
      projectName: '',
    };
  },
  created() {},
  mounted() {
    // uni.setStorageSync('test', 123) //存入缓存
    // if(uni.setStorageSync('project')?.id) this.projectName = uni.getStorageSync('project').name
  },
  watch: {
    projectList: {
      deep: true,
      handler(v) {
        if(v && v.length) {
          if(uni.getStorageSync('project')?.id) {
            this.projectName = uni.getStorageSync('project').name
            this.$store.dispatch('project/setProject', uni.getStorageSync('project'))
          }else {
            this.projectName = v[0].name
            this.$store.dispatch('project/setProject', v[0])
          }
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters({
      projectList: 'projectList',
    }),
    ...mapState({
      currentProject: (state) => state.project.project,
    })
  },
  methods: {
    showPopHandler() {
      this.$refs.popup.show()
    },
    selectProject(project) {
      this.projectName = project.name
      uni.setStorageSync('project', project) //存入缓存
      this.$store.dispatch('project/setProject', project)
      this.$refs.popup.hide()
    }
  },
};
</script>
<style lang="scss" scoped>
.header-nav {
  position: relative;
  text-align: center;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  height: 50rpx;
  .eccchange-project-img {
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    left: 0;
    top: 8rpx;
  }
  .project-name {
    color: #282a33;
    font-weight: bold;
    font-size: 36rpx;
  }
}
.project-pop-box {
  background-color: #fff;
  .project-item {
    padding: 0 32rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 500;
    color: #383c48;
    background-color: #fff;
  }
  .project-item-in {
    border-bottom: 1px solid rgba(220, 228, 245, 0.5);
  }
  .project-item-active {
    color: #0ac7b9;
    background-color: #d5f6f4;
  }
}
</style>